<!-- createdOrder -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .clear {
    width: 16px;
    height: 16px;
    margin: 0;
    position: absolute;
    right: 10px;
    @include bg('~assets/common/images/close.png');
  }

  .pagePay {
    height: 100%;
    .payContainer {
      padding: 1.25rem 0 2.25rem 0;
      overflow-y: scroll;
      height: 100%;
      .order-info-container {
        background: #FAFDFF;
        @include flexbox(space-between,
        center,
        column,
        nowrap);
        .cell-container {
          background: #FAFDFF;
          margin-top: 0;
          width: 100%;
          .cell-item {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            padding: $padding;
            border-bottom: 1px solid #E7ECF1;
            .amount {
              color: red;
              padding-left: 5px;
            }
          }
          .pay-order-detail {
            padding: $padding;
            border-bottom: 1px solid #E7ECF1;
            .order-item {
              border-bottom: 1px solid #E7ECF1;
              p {
                @include flexbox(space-between,
                center,
                row,
                nowrap);
                align-items: flex-start;
                line-height: 20px;
                label {
                  width: 80px;
                  padding-right: 10px;
                }

                span {
                  flex: 1;
                  text-align: right;
                }
                .title {
                  @include textoverflow(2);
                }
                .amount {
                  color: $red;
                }
              }
              &:last-child {
                border-bottom: 0;
              }
            }
          }
          .show-more {
            color: #AFB0B1;
            .arrow-up {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 5px;
              background: url('~assets/common/images/arrow_gray_top.png') center center no-repeat;
              background-size: 100% auto;
            }
            .arrow-down {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 5px;
              background: url('~assets/common/images/arrow-down.png') center center no-repeat;
              background-size: 100% auto;
            }
          }
        }
      }
      .cell-container {
        background: #fff;
        margin-top: $margin;
        .cell-title {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          padding: $padding;
          border-bottom: 1px solid #eee;
          .left {
            span {
              font-size: $title;
              color: #333;
              font-weight: 500;
            }
          }
          .right {
            @include flexbox(flex-end,
            center,
            row,
            nowrap);
            span {
              color: $orange;
            }
            .arrow-right {
              display: block;
              width: 16px;
              height: 16px;
              background: url('~assets/common/images/arrow-right.png') no-repeat;
              background-size: auto 100%;
            }
          }
        }
        .cell-list {
          padding-left: $padding;
          .cell-item {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            border-bottom: 1px solid #eee;
            padding: $padding $padding $padding 0;
            .left {
              .jq-icon {
                vertical-align: middle;
                width: 23px;
                height: 20px;
                display: inline-block;
                background: url('~assets/common/images/balance_pay.png') no-repeat;
                background-size: 100%;
              }
              span {
                font-size: $title;
                color: #333;
                font-weight: 500;
              }
            }
            .right {
              @include flexbox(flex-end,
              center,
              row,
              nowrap);
              span {
                color: $orange;
              }
              .arrow-right {
                display: block;
                width: 16px;
                height: 16px;
                background: url('~assets/common/images/arrow-right.png') no-repeat;
                background-size: 100%;
              }
            }
          }
        }
      }
    }
    .payOnline {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      font-size: 15px;
      @include flexbox(center,
      center,
      row,
      nowrap);
      color: #fff;
      background: #FF5959;
      text-align: center;
      padding: 15px;
      &.weixin {
        background: #00B700;
      }
    }
  }

  .paymentLoading {
    position: fixed;
    @include flexbox(center,
    center,
    row,
    nowrap);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    img {
      background: rgba(0, 0, 0, .6);
      width: 3rem;
    }
  }

  .paymentContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    @include flexbox(center,
    center,
    row,
    nowrap);
    z-index: 2003;
    .content {
      width: 85%;
      background: #fff;
      border-radius: 10px;
      >button {
        width: 60%;
        margin: 10px auto;
        background: $red;
      }
      >a {
        margin: 5px 0;
        padding: 0 10px;
      }
      .title {
        @include flexbox(center,
        center,
        row,
        nowrap);
        position: relative;
        padding: $padding;
        border-bottom: 1px solid #eee;
        strong {
          font-size: 20px;
        }
        .closeIcon {
          display: block;
          background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
          width: 25px;
          height: 25px;
          background-position: -38px -19px;
          background-size: 150px;
          vertical-align: -8px;
          position: absolute;
          right: 10px;
        }
      }
      .paymentInfo {
        padding: $padding;
        border-bottom: 1px solid #eee;

        .card-cell {
          position: relative;
          background: #fff;
          padding: $padding;
          border-bottom: 1px solid #eee;
          @include placeholderColor($gray);
          width: 100%;
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
        }
        .pay-code-cell {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          .code-cell {
            width: 50%;
            background: #fff;
            position: relative;
            padding: $padding;
            @include placeholderColor($gray);
            input {
              width: 100%;
              border: none;
              outline: none;
              box-shadow: none;
              text-shadow: none;
              text-align: left;
              font-size: $title;
              color: #333;
            }
          }
          .pay-getCode {
            width: 50%; //    background: $red;
            color: $red;
            font-size: 16px;
            text-align: center;
            margin-left: 10px;
            border-radius: 2px;
            padding: 10px 0;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .paymentContainer .mint-cell-wrapper {
    background-image: none;
  }
</style>
<template>
  <div class="pagePay">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="Back"></i>
      <strong>订单支付</strong>
      <i class="myMsg"></i>
    </div>
    <div class="payContainer">
      <div class="order-info-container" v-if="orderData">
        <!--<div class="cell-container">
          <div class="cell-item">
            <div>共{{orderData.orderNum}}笔订单</div>
            <div>订单总金额<span class="amount">¥ {{orderData.orderPayPrice|formatMoney}}</span> </div>
          </div>
          <div class="pay-order-detail" v-if="showDetailInfo">
            <div v-for="(item ,index) in orderData.orderGoodsList" :key="index">
              <p>
                <label>订单号: </label><span>{{item.orderCode}}</span>
              </p>
              <p>
                <label>商品信息: </label><span>{{item.goodsName}}</span>
              </p>
              <p>
                <label>发货仓: </label><span>{{item.supplierWarehouse}}</span>
              </p>
              <p>
                <label>商品价格: </label><span>{{item.goodsDiscountPrice|formatMoney}}</span>
              </p>
              <p>
                <label>收货信息: </label><span>{{item.receiver}} {{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.orderAddress}},
                        {{item.orderPhone|hidePhone}}</span>
              </p>
            </div>
          </div>
          <div class="cell-item">
            <div>发货仓{{orderData.supplierNum}} 运费总计：{{orderData.orderFreight|formatMoney}}</div>
          </div>
          <div class="cell-item show-more" @click="showPayDetail"><span>显示订单明细</span><i :class="{ 'arrow-up' : showClass, 'arrow-down': !showClass}"></i></div>
        </div>-->
        <div class="cell-container">
          <div class="cell-item">
            <div>共{{orderData.orderNum}}笔订单</div>
            <div>订单总金额(含运费)<span class="amount">&yen;{{orderData.orderPayPrice|formatMoney}}</span> </div>
          </div>
          <div class="cell-item">
            <p>
              <label>订单号:</label><span>{{orderItem.orderCode}}</span>
            </p>
          </div>
          <div class="pay-order-detail" v-if="showDetailInfo">
            <div class="order-item" v-for="(item ,index) in orderData.orderGoodsList" :key="index">
              <!--<p>
                <label>订单号: </label><span>{{item.orderCode}}</span>
              </p>-->
              <p>
                <label>商品信息:</label><span class="title">{{item.sellingPoints}}</span>
              </p>
              <!--<p>
                <label>发货仓:</label><span>{{item.supplierWarehouse}}</span>
              </p>-->
              <p>
                <label>商品价格: </label><span class="amount">&yen;{{item.goodsDiscountPrice|formatMoney}}</span> *{{item.goodsNum}}
              </p>
              <!--<p>
                <label>收货信息: </label><span>{{item.receiver}} {{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.orderAddress}},
                        {{item.orderPhone|hidePhone}}</span>
              </p>-->
            </div>
          </div>
          <div class="cell-item">
            <p>
              <label>收货信息: </label><span>{{orderItem.receiver}} {{orderItem.provinceName}} {{orderItem.cityName}} {{orderItem.areaName}} {{orderItem.orderAddress}},
              {{orderItem.orderPhone|hidePhone}}</span>
            </p>
          </div>
          <div class="cell-item">
            <div>发货仓{{orderData.supplierNum}} 运费总计：{{orderData.orderFreight|formatMoney}}</div>
          </div>
          <div class="cell-item show-more" @click="showPayDetail"><span>显示订单明细</span><i :class="{ 'arrow-up' : showClass, 'arrow-down': !showClass}"></i></div>
        </div>
      </div>
      <div class="cell-container">
        <div class="cell-title">
          <div class="left">
            <span>支付方式</span>
          </div>
        </div>
        <div class="cell-list">
          <div class="cell-item" v-for="(item,index) in payStrategy" :key="item.id">
            <div class="left">
              <i :class="item.class+'-icon'"></i> <span>{{item.name}}</span>
            </div>
            <div class="right">
              <span class="mint-checkbox">
                        <input type="radio" v-model="selected"  class="mint-checkbox-input" v-bind:value="item.value" :id="item.id" > 
                        <label   v-bind:for="item.id" class="mint-checkbox-core"></label>
                     </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="orderData" class="payOnline" :class="payStrategy[selected].class" @click="CallPay">
      {{payStrategy[selected].name}}：{{orderData.orderPayPrice|formatMoney}}元
    </div>
    <div class="paymentContainer" v-if="visiblePopup.paymentContainerVisible">
      <div class="content">
        <div class="title">
          <strong>支付</strong>
          <i class="closeIcon" @click="()=>visiblePopup.paymentContainerVisible=false"></i>
        </div>
        <div class="paymentInfo">
          <div class="card-cell">
            <input v-validate.initial="'required'" name="payCardNo" type="tel" v-model="jqPayForm.cardNo" placeholder="请输入卡号">
            <i class="clear" v-show="jqPayForm.cardNo.length>0" @click="jqPayForm.cardNo=''" style="right: 10px;top:12px;"></i>
          </div>
          <div class="pay-code-cell" v-if="orderData.orderPayPrice>20">
            <div class="code-cell">
              <input v-focus v-validate.initial="'required'" name="payCode" type="tel" v-model="jqPayForm.code" placeholder="请输入验证码">
              <i class="clear" v-show="jqPayForm.code.length>0" @click="jqPayForm.code=''" style="right: 10px;top:12px;"></i>
            </div>
            <div :class="['pay-getCode',jqPayForm.resetSendPhoneMessage?'disabled-btn':'']" @click="sendPhoneMessage" :disabled="jqPayForm.resetSendPhoneMessage">{{jqPayForm.resetSendPhoneMessage ? `${jqPayForm.resetSendPhoneMessage}后重新发送` : '获取验证码'}}</div>
          </div>
        </div>
        <div :class="['cell-btn',errors.has('payCardNo')||errors.has('payCode')?'disabled-btn':'']" @click="PaySubmit">确认支付</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Button,
    Toast,
    Popup,
    MessageBox
  } from 'mint-ui';

  import {
    mapGetters
  } from 'vuex'

  export default {

    data() {
      return {
        orderData: null,
        showDetailInfo: false,
        showClass: false,
        selected: 0,
        payStrategy: [{
            id: "jqPay",
            value: 0,
            name: '智荟金桥',
            class: 'jq'
          },
          // {
          //    id: "wechat",
          //    value: 1,
          //    name: '微信支付',
          //    class: 'weixin'
          // }
        ],
        orderItem: {},
        visiblePopup: {
          paymentContainerVisible: false
        },
        jqPayForm: {
          cardNo: '',
          resetSendPhoneMessage: null,
          code: ''
        },

      };
    },
    components: {},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      //返回
      Back() {
        MessageBox({
          title: '确认要离开订单支付吗？',
          cancelButtonText: '继续支付',
          confirmButtonText: '确认离开',
          message: '离开后将不保存该订单，您需要重新进行下单。',
          showCancelButton: true
        }).then(action => {
          if (action == "confirm") {
            this.$router.push('/list');
          }
        });
      },
      //隐藏显示商品详情
      showPayDetail() {
        //显示隐藏支付订单详情
        this.showDetailInfo = !this.showDetailInfo;
        //显示隐藏icon 样式
        this.showClass = !this.showClass;
      },
      //金桥一卡通支付
      CallPay() {
        //获取用户卡号
        let params = {
          userAccount: this.userInfo.userAccount //用户id
        };
        this.$store.dispatch('GetUserCard', params)
          .then(response => {
            this.jqPayForm.cardNo = response.data.cardNo
          })
        this.visiblePopup.paymentContainerVisible = true;
      },
      //确定支付
      PaySubmit() {
        var params = {
          cardNo: this.jqPayForm.cardNo,
          code: this.jqPayForm.code,
          userId: this.userInfo.id,
          txnAmt: this.orderData.orderPayPrice,
          orderId: this.$route.query.orderid,
          flag: this.orderData.orderPayPrice > 20 ? '001' : '002' // 有密还是无密 (001有密002无密,金额大于20元需要)
        }
        this.$store.dispatch('EPay', params)
          .then(response => {
            this.$router.push({
              name: "paysuccess"
            })
          }, err => {
            if (err.status === 500) {
              MessageBox({
                cancelButtonText: '取消',
                confirmButtonText: '去充值',
                message: err.info + '请充值',
                showCancelButton: true
              }).then(action => {
                if (action == "confirm") {
                  // 调用app充值
                  parent.openCharge();
                }
              });
            } else {
              Toast(err.info)
            }


          });
      },
      async initData() {
        // 判断是否登录
        if (!this.userInfo) return
        if (this.$route.query.orderid) {
          let params = {
            orderId: this.$route.query.orderid,
            userId: this.userInfo.id, //用户id
          };
          this.$store.dispatch('PayOrder', params)
            .then(response => {
              this.orderData = response.data.orderDetails
              this.orderItem = response.data.orderDetails.orderGoodsList[0]
            })
        }

      },
      async sendPhoneMessage() {
        //获取验证码
        await this.$store.dispatch('SendEPayPhoneCode', {
          cardNo: this.jqPayForm.cardNo
        }).then(response => {
          Toast({
            message: '短信发送成功',

          })
        });
        this.jqPayForm.resetSendPhoneMessage = 60;
        let times = setInterval(() => {
          if (this.jqPayForm.resetSendPhoneMessage <= 0) {
            this.jqPayForm.resetSendPhoneMessage = null;
            clearInterval(times);
          } else {
            this.jqPayForm.resetSendPhoneMessage--;
          }
        }, 1000)
      },


    },
    mounted() {
      //刷新当前页面
      this.initData();

    }
  }
</script>